<template>
    <div>
      <Table :columns="columns" :data="packageList"  @on-select="onSelect" @on-select-all="onSelectAll" @on-select-cancel="onSelectCancel" @on-select-all-cancel="onSelectAllCancel" />
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          columns: [
            { title: '套餐编码', key: 'code', align: 'center' },
            { title: '套餐名称', key: 'name', align: 'center' },
            { title: '套餐说明', key: 'coursePackageDesc', align: 'center' },
            { title: '一级分类', key: 'firstName', align: 'center' },
            { title: '二级分类', key: 'secondName', align: 'center' },
            { title: '三级分类', key: 'thirdName', align: 'center' },
            {
              title: '套餐类型', key: 'platformType', align: 'center', render: (h, params) => {
                let platformTypeDesc = ''
                switch (params.row.platformType) {
                  case 2:
                    platformTypeDesc = '直播课时套餐'
                    break;
                  case 3:
                    platformTypeDesc = '录播课'
                    break;
                }
                return h('div', {}, platformTypeDesc)
              }
            },
            { title: '套餐总价', key: 'allPrice', align: 'center' },
            { title: '优惠后总价', key: 'realAmt', align: 'center' },
            { title: '已售出', key: 'sellCount', align: 'center' },
            {
              title: '管理', key: 'actions', align: 'center', render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.packageLower(params.row)
                      }
                    },
                    directives: [
                      { name: 'hasPermission', value: "packageLower" }
                    ]
                  }, '下架'),
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small',
                      disabled: params.row.status===4 ? true : false
                    },
                    style: {
                      marginRight: '5px',
                      // display: params.row.status===2 ? 'none' : 'inline-block'
                    },
                    on: {
                      click: () => {
                        this.packageEdit(params.row)
                      }
                    },
                    directives: [
                      { name: 'hasPermission', value: "packageEdit" }
                    ]
                  }, '套餐编辑'),
                ])
              }
            }
          ]
        }
      },
      props: ['packageList'],
      methods: {
        packageLower(row) {
          this.$emit('package_lower', row)
        },
        packageEdit(row) {
          this.$emit('package_edit', row)
        },
        packageEdit (row) {
          this.$emit('package_edit', row)
        },
        packageDelete(row) {
          this.$emit('package_delete', row)
        },
        onSelect (selection, row) {
          this.$emit('on_select', selection)
        },
        onSelectAll (selection) {
          this.$emit('on_select_all', selection)
        },
        onSelectCancel(selection) {
          this.$emit('on_select_cancel', selection)
        },
        onSelectAllCancel(selection){
          this.$emit('on_select_all_cancel')
        }
      }
    }
  </script>
